function map() {
    var myChart = echarts.init(document.getElementById('map_1'));

    function fetchData() {
        var cityNamesPinyin = [
            'anqing', 'bozhou', 'bangbu', 'chuzhou', 'chizhou',
            'fuyang', 'huainan', 'huaibei', 'huangshan', 'hefei',
            'liuan', 'maanshan', 'suzhou', 'tongling', 'wuhu',
            'xuancheng', 'dangshan', 'guangde'
        ];

        var dataValue1 = {};

        var promises = cityNamesPinyin.map(city => {
            return fetch('http://localhost:5000/api/weather/' + encodeURIComponent(city))
                .then(response => response.json())
                .then(data => {
                    dataValue1[city] = data.average_temperature;
                })
                .catch(error => {
                    console.error('Error fetching data for city:', city, error);
                    dataValue1[city] = 0;
                });
        });

        Promise.all(promises).then(() => {
            var data = Object.keys(dataValue1).map(city => ({
                name: city,
                value: dataValue1[city]
            }));

            var geoCoordMap = {
                'anqing': [117.043551, 30.50883],
                'bozhou': [115.782939, 33.869338],
                'bangbu': [117.363228, 32.939667],
                'chuzhou': [118.316264, 32.303627],
                'chizhou': [117.489157, 30.656037],
                'fuyang': [115.819729, 32.896969],
                'huainan': [117.018329, 32.647574],
                'huaibei': [116.794664, 33.971707],
                'huangshan': [118.317325, 29.709239],
                'hefei': [117.283042, 31.86119],
                'liuan': [116.507676, 31.752889],
                'maanshan': [118.507906, 31.689362],
                'suzhou': [116.984084, 33.633891],
                'tongling': [117.816576, 30.929935],
                'wuhu': [118.376451, 31.326319],
                'xuancheng': [118.757995, 30.945667],
                'dangshan': [116.351113, 34.426247],
                'guangde': [119.417521, 30.893116]
            };

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof (params.value)[2] == "undefined") {
                            return params.name + ' : ' + params.value;
                        } else {
                            return params.name + ' : ' + params.value[2];
                        }
                    }
                },
                geo: {
                    map: 'anhui',
                    label: {
                        normal: {
                            show: false // Hide the labels on the map
                        },
                        emphasis: {
                            show: true // Optionally show the label on hover
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#2E9AFE',
                            borderColor: '#002097'
                        },
                        emphasis: {
                            areaColor: '#293fff'
                        }
                    }
                },
                series: [
                    {
                        name: 'Temperature',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 2; // Adjust this scaling factor for better visibility
                        },
                        label: {
                            normal: {
                                formatter: '{b} : {c}', // Optional, adjust as needed
                                position: 'right',
                                show: false // Hide series labels
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ffeb7b'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        });
    }

    fetchData();

    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
